<template>
  <div style="padding: 50px 50px;">
    <div class="block">
      <el-timeline>
        <el-timeline-item v-for="(item,index) in evidence_info" :timestamp="item.createtime" :key="index" placement="top">
          <el-card style="padding: 0px 30px 30px 30px">
            <div>
              <div :class="item.status == 1?'presentation-icon_seller':'presentation-icon_buyers'">
                <div style="text-align: center;line-height: 80px">
                  <span style="font-size: 20px;color: white">{{ item.status == 1?'卖家':'买家' }}</span>
                </div>
              </div>
              <div style="display: inline-block;">
                <h2>{{ item.status == 1?'卖家':'买家' }}发表了留言</h2>
              </div>
            </div>
            <p style="margin-left: 100px">
              {{ item.evidence_font }}
            </p>
              <div v-if="item.evidence_img.length > 1" class="evidence">
                <div v-for="(imgItem,index) in item.evidence_img" :key="index">
                  <img @click="openImg(imgItem)"
                       :src="imgItem" alt="">
                </div>
              </div>
              <div v-else class="evidence-single">
                <img v-for="(imgItem,index) in item.evidence_img" :key="index" @click="openImg(imgItem)"
                     :src="imgItem" alt="">
              </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <!-- 传组件status状态 -->
    <submit-evidence :status="tribunal_info.status"></submit-evidence>
  </div>
</template>

<script>
import SubmitEvidence from "./submitEvidence";

export default {
  name: "presentation",
  components: {SubmitEvidence},
  data() {
    return {
      evidence_info: {},
      tribunal_info: {},
    }
  },
  created() {
    this.getEvidenceInfo()
    this.getTribunalInfo()
  },
  methods: {
    async getEvidenceInfo() {
      let res = await this.$axios.get('/evidence/getEvidenceByTribunalId', {
        params: {
          tribunal_id: this.$route.query.tribunal_id
        }
      })
      this.evidence_info = this.getImgNewList(res.list)
    },
    async getTribunalInfo() {
      let res = await this.$axios.get('/tribunal/getTribunalDetailById', {
        params: {
          tribunal_id:this.$route.query.tribunal_id
        }
      })
      this.tribunal_info = res.data
    },
    openImg(src) {
      window.open(src, "_blank");
    },
    getImgNewList(data) {
      data.forEach((item,index)=>{
        if(item.evidence_img) {
          item.evidence_img = item.evidence_img.split(",")
        } else {
          item.evidence_img = []
        }
      })
      return data
    }
  }
}
</script>

<style scoped>
.presentation-icon_buyers {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: #5e51e3;
  border-radius: 50%;
  margin: 16px 16px 0px 0px;
}

.presentation-icon_seller {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: red;
  border-radius: 50%;
  margin: 16px 16px 0px 0px;
}

p {
  font-size: 18px;
}

.evidence-single {

  margin-left: 100px;
}

.evidence-single img {
  flex-shrink: 0;
  width: 50%;
  height: 50%;
}

.evidence {
  margin-left: 100px;
  display: flex;
  flex-wrap: wrap;
}

.evidence div {
  width: 200px;
  height: 200px;
  margin: 16px 16px 0 0;
}

.evidence img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

</style>
